<template>
<nav class="navbar">
  <div class="navbar-brand">
    <div class="navbar-item">
      <span class="title has-text-info">Cards</span>
    </div>
    <div class="navbar-item">
      <span class="title">
        <a id="issue" :href="issueUrl" target="_blank">Issue</a>
      </span>
    </div>
    <slot></slot>
  </div>
</nav>
</template>

<script>
const shell = require('electron').shell
export default {
  name: 'nav-bar',
  data: function () {
    return {
      issueUrl: 'https://gitee.com/huand/cards/issues'
    }
  },
  computed: {
    issueLink: function () {
      return this.$el.querySelector('#issue')
    }
  },
  methods: {
    openIssueUrl (event) {
      event.preventDefault()
      shell.openExternal(this.issueUrl)
    }
  },
  mounted: function () {
    this.issueLink.addEventListener('click', this.openIssueUrl)
  },
  destroyed: function () {
    this.issueLink.removeEventListener('click', this.openIssueUrl)
  }
}
</script>

<style>

</style>
